<script lang="ts" setup>

import {onActivated, ref} from "vue"
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus"
import {getUserInfo, puty} from "../serve"

const
    router = useRouter(),
    itemList = ref([]),
    userInfo = ref(JSON.parse(sessionStorage.getItem('userInfoSy'))),
    price = ref(0.00),
    vipPrice = ref(0.00),
    load = ref(true)
;
// onActivated(() => {
//   get()
// })
get()
function get() {
  // console.log(123)
  itemList.value = JSON.parse(sessionStorage.getItem('checkoutInfoList'))
  price.value = 0.00
  vipPrice.value = 0.00
  for (let i = 0; i < itemList.value.length; i++) {
    price.value += parseFloat(itemList.value[i]['price'] * itemList.value[i]['num'])
    vipPrice.value += parseFloat(itemList.value[i]['vipPrice'] * itemList.value[i]['num'])
  }
  load.value = false
  // console.log(itemList.value)
}

function submit() {
  ElMessageBox.confirm('是否确定支付？', '支付', {type: 'info'}).then(() => {
    let userF = userInfo.value
    if (!userF['address']){
      ElMessage({type:'error',message:'请先设置收货地址！',duration:1500})
      return
    }
    if (!userF['phone']){
      ElMessage({type:'error',message:'请先设置手机号！',duration:1500})
      return
    }
    if (!userF['nickname']){
      ElMessage({type:'error',message:'请先设置您的姓名！',duration:1500})
      return
    }
    let list: { shoppingCartId: "" | null; productId: "" | null; quantity: any }[]
    list = []
    itemList.value.forEach(e=>{
      list.push({shoppingCartId:e['carId'],productId:e['id'],quantity:e['num']})
    })
    puty('',[...list]).then(() => {
      getUserInfo().then(r=>{
        sessionStorage.setItem('userInfoSy',JSON.stringify(r))
      })
      ElMessage({type: 'success', message: '支付成功！',duration:1500})
      load.value = true
      setTimeout(() => {
        router.back()
      }, 1000)
    })
    // router.back()
  }).catch(() => true)
}
</script>

<template>
  <el-scrollbar v-loading="load" element-loading-text="加载中...">
    <el-card>
      <template #header>
        <div carrel-top>结账</div>
      </template>
      <div address>
        <h3 style="margin-bottom: 10px;">收货地址：</h3>
        <h5 style="width: 90%;">
          <div>{{ userInfo['address'] ? userInfo['address'] : '未设置收货地址' }}</div>
          <div style="margin-top: 10px;">{{ userInfo['phone']  + '&nbsp;&nbsp;&nbsp;&nbsp;' + (userInfo['nickname'] || '')}}</div>
        </h5>
        <div up @click="router.push('/userInfo').catch(()=>true)">编辑</div>
      </div>
      <div container>
        <div v-for="(i,index) in itemList" :key="index" style="display: flex;align-items: center;">
          <div l-container>
            <div line/>
            <img :src="i['image']" alt=""/>
            <div right style="color: #2c2c2c;position: relative">
              <div top>
                <div>{{ i['storeName'] }}</div>
                <div>{{ '¥' + i['price'] }}</div>
              </div>
              <div synopsis>{{ i['storeInfo'] }}</div>
              <div style="position: absolute;right: 0;bottom: 0;">{{ 'x' + i['num'] }}</div>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 150px;"></div>
      </div>
      <div checkout>
        <div top>订单详情</div>
        <div price>
          <div>价格</div>
          <div>¥ {{ userInfo['vip'] ? vipPrice.toFixed(2) : price.toFixed(2) }}</div>
        </div>
        <div price>
          <div>会员优惠</div>
          <div>¥ {{ userInfo['vip'] ? (price - vipPrice).toFixed(2) : '0.00' }}</div>
        </div>
        <div price>
          <div>邮费</div>
          <div style="color:#FBADC4;">免费</div>
        </div>
        <div style="width: 100%;height: 2px;background-color: #d0d0d0"/>
        <div submit @click="submit">立即支付</div>
      </div>
    </el-card>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[carrel-top] {
  font-size: 25px;
  margin-left: 18px;
  margin-right: 80px;
}

[address] {
  margin-left: 60px;
  width: calc(100% - 550px);
  position: relative;

  [up] {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 14px;
    cursor: pointer;

    &:hover {
      color: #FA9BB6;
    }
  }
}

[container] {
  margin-left: 40px;

  [a] {
    width: 15px;
    height: 15px;
  }

  [l-container] {
    width: calc(100% - 550px);
    display: flex;
    justify-content: start;
    padding: 40px 0;
    position: relative;
    margin-left: 10px;

    [line] {
      width: 100%;
      bottom: 0;
      height: 2px;
      position: absolute;
      background-color: #eeeeee;
    }

    img {
      margin-right: 20px;
      width: 150px;
      height: 150px;
      border-radius: 10px;
    }

    [right] {
      flex: 1;

      [top] {
        display: flex;
        justify-content: space-between;
      }

      [synopsis] {
        margin-top: 15px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

    }
  }

}

[checkout] {
  width: 260px;
  height: 380px;
  border: 2px solid #E7E7EA;
  border-radius: 10px;
  padding: 50px 30px;
  position: absolute;
  top: 145px;
  right: 150px;

  [top] {
    font-size: 22px;
    margin-bottom: 30px;
  }

  [price] {
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  [submit] {
    background-color: #d71d52;
    margin-top: 50px;
    border-radius: 10px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
  }
}
</style>